import React, {Component} from 'react';
//引入PropTypes插件
import PropTypes from 'prop-types'

/*
 新增需求
  1.页面加载后,聚焦的到输入框
  使用ref属性对DOM进行操作
  元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。
  通过生命周期函数componentDidMount ()对DOM进行操作
  2.组件实现组件参数验证
  PropType插件实现
  3.组件自动获取用户名
  通过componentWillMount()方法实现
  4.添加发表时间
  new Data()

*/

/*

  这里插入一些小贴示，大家可以注意到我们组件的命名和方法的摆放顺序其实有一定的讲究，
  这里可以简单分享一下个人的习惯，仅供参考。
  组件的私有方法都用 _ 开头，所有事件监听的方法都用 handle 开头。
  把事件监听方法传给组件的时候，属性名用 on 开头。

  另外，组件的内容编写顺序如下：

  1.static 开头的类属性，如 defaultProps、propTypes。
  2.构造函数，constructor。
  3.getter/setter（还不了解的同学可以暂时忽略）。
  4.组件生命周期。
  5._ 开头的私有方法。
  6.事件监听方法，handle*。
  7.render*开头的方法，有时候 render() 方法里面的内容会分开到不同函数里面进行，这些函数都以 render* 开头。
  8.render() 方法。
*/

class CommentInput extends Component {
  //
  static propTypes = {
    onSubmit: PropTypes.func
  }

  constructor() {
    super();
    this.state = {
      userName: '',
      content: ''
    };
  }

  componentWillMount() {
    this._loadUsername();
  }

  componentDidMount() {
    this
      .textarea
      .focus();
  }

  //加载姓名
  _loadUsername() {
    const username = localStorage.getItem('userName');
    if (username) {
      this.setState({'userName': username});
      // this.setState({username});
    }
  }

  //保存姓名到本地
  _saveUserName(username) {
    localStorage.setItem('userName', username);
  }

  //input丢失焦点后保存姓名
  /* 在 handleUsernameBlur 中我们把用户输入的内容传给了 _saveUsername 私有方法（所有私有方法都以 _ 开头）。 */
  handleUsernameBlur(event) {
    this._saveUserName(event.target.value);
  }

  //input控件绑定
  inputChange(event) {
    this.setState({userName: event.target.value});
  }

  //文本框控件绑定
  textareaChange(event) {
    this.setState({content: event.target.value});
  }

  //父子组件传参
  handleSubmit() {
    //判断组件中配置属性'props'中,是否有onSubmit属性
    if (this.props.onSubmit) {
      // const {userName, content} = this.state; 传参给父组件
      this
        .props
        .onSubmit({
          userName: this.state.userName,
          content: this.state.content,
          createdTime: Date.now()
        });
    }
    //提交完成后,清空文本
    this.setState({content: ''})
  }
  render() {
    console.log(this);
    return (
      <div className='comment-input'>
        <div className='comment-field'>
          <span className='comment-field-name'>用户名：</span>
          <div className='comment-field-input'>
            <input
              value={this.state.userName}
              onBlur={this
              .handleUsernameBlur
              .bind(this)}
              onChange={this
              .inputChange
              .bind(this)}/>
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>评论内容：</span>
          <div className='comment-field-input'>
            <textarea
              ref={(textarea => this.textarea = textarea)}
              value={this.state.content}
              onChange={this
              .textareaChange
              .bind(this)}/>
          </div>
        </div>
        <div className='comment-field-button'>
          <button onClick={this
            .handleSubmit
            .bind(this)}>
            发布
          </button>
        </div>
      </div>
    )
  }
}

export default CommentInput;